<template>
  <div id="container" style="width: 100%; height: 100vh"></div>
</template>

<script setup>
import { onMounted } from "vue";
import {getVehicleHeadMap} from '@/api/dashborad/index';
import AMapLoader from "@amap/amap-jsapi-loader";
const  map = ref(undefined);
const mouseTool=ref(undefined)
const heatmap=ref(undefined)
const heatmapData = ref([]);
// 判断浏览器是否支持Canvas
function isSupportCanvas() {
  const elem = document.createElement("canvas");
  return !!(elem.getContext && elem.getContext("2d"));
}

onMounted(() => {
  if (!isSupportCanvas()) {
    alert(
      "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~"
    );
    return;
  }
  window._AMapSecurityConfig = {
    securityJsCode: "「11fa46171b5a476ff40581ce7737421d」",
  };
  AMapLoader.load({
    key: "7f8922a33480e520cc450d7ffa3efb8e",
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.MouseTool", "AMap.HeatMap"],
  }).then((AMap) => {
    map.value = new AMap.Map("container", {
      viewMode: "2D",
      zoom: 13,
      resizeEnable: true,
      center:[113.69235, 34.751748],
    });
    // 加载热力图插件
    map.value.plugin(["MAMap.HeatMap"], function () {
      // 初始化热力图对象
      heatmap.value = new AMap.HeatMap(map.value, {
        radius: 25, // 设置热力图的半径
        opacity: [0, 0.8], // 设置热力图的透明度
      });
      // console.log(heatmap.value)
      heatmapData.value = [

        {
          lng: 113.773631,
          lat: 34.7601,
          count: 75,
        },
        {
          lng: 113.766885,
          lat: 34.758824,
          count: 52,
        },
        {
          lng: 113.708293,
          lat: 34.742179,
          count: 77,
        },
        {
          lng: 113.663353,
          lat: 34.748829,
          count: 78,
        },
        {
          lng: 113.715005,
          lat: 34.746302,
          count: 79,
        },
        {
          lng: 113.713148,
          lat: 34.746734,
          count: 80,
        },
        {
          lng: 113.715622,
          lat: 34.748467,
          count: 81,
        },
        {
          lng: 113.628771,
          lat: 34.751346,
          count: 18,
        },
        {
          lng: 113.631029,
          lat: 34.749708,
          count: 28,
        },
        {
          lng: 113.630793,
          lat: 34.747419,
          count: 82,
        },
        {
          lng: 113.664919,
          lat: 34.778819,
          count: 36,
        },
        {
          lng: 113.664919,
          lat: 34.778818,
          count: 64,
        }
      ];
      getVehicleHeadMap().then(res => {
        if(res.code === 200){
          heatmapData.value.push(res.data)
        }
      });
      heatmap.value.setDataSet({
        data: heatmapData.value,
        max: 100,
      });

    });

  });
});


</script>

<style scoped>
#container {
  height: 100vh;
}
</style>